<template>
    <h1>年份 --- {{ year }}</h1>
    <button @click="year++">修改年份</button>

    <h1>{{ msg1 }} --- {{ msg2 }}</h1>
</template>

<script>
export default {
    data() {
        return {
            year: 2005,
            msg1: "",
            msg2: "",
        };
    },
    // 内部专门存储 侦听器
    watch: {
        year: {
            handler() {
                console.log(
                    "页面首次执行的时候, 我不会执行, 但是 year 这个变量被修改后我会立即执行"
                );
                // document.body.style.backgroundColor = "red";
                this.msg1 = "msg1 展示";
                this.msg2 = "msg2 展示";
            },
            // 将当前的侦听器在页面打开的时候立即执行一次
            immediate: true,

            // 开始深层监听, 极度不推荐, 因为这个选项开启之后, 会遍历我们监听的对象/数组内的所有数据, 不管对象或者数组有多少层, 都会监听, 非常浪费性能
            // deep: true

            // 将侦听器的回调延迟到 VUE 真实 DOM 更新完毕后 执行
            // flush: 'post'
        },
        // year() {
        //     console.log(
        //         "页面首次执行的时候, 我不会执行, 但是 year 这个变量被修改后我会立即执行"
        //     );
        //     document.body.style.backgroundColor = "red";
        //     this.msg1 = "msg1 展示";
        //     this.msg2 = "msg2 展示";
        // },
    },
};
</script>

<style></style>
